import React, { useEffect, useRef } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';

const Error403: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const path = searchParams.get('path') || '未知路径';
  const svgRef = useRef<SVGSVGElement>(null);
  const digit1Ref = useRef<SVGTextElement>(null);
  const digit2Ref = useRef<SVGTextElement>(null);
  const digit3Ref = useRef<SVGTextElement>(null);
  const lineRef = useRef<SVGLineElement>(null);

  useEffect(() => {
    let animationFrameId: number;
    let startTime: number | null = null;
    const duration = 1000; // 动画持续时间(ms)
    const jumpHeight = 20; // 数字跳动高度

    const animate = (timestamp: number) => {
      if (!startTime) startTime = timestamp;
      const elapsed = timestamp - startTime;

      // 横线始终显示
      if (lineRef.current) {
        lineRef.current.setAttribute('x1', '50');
        lineRef.current.setAttribute('x2', '250');
      }

      // 仅第一个数字有动画效果
      if (digit2Ref.current) {
        const progress = Math.min(elapsed / duration, 1);
        const jumpValue = Math.sin(progress * Math.PI * 2) * jumpHeight;
        digit2Ref.current.setAttribute('y', `${150 - jumpValue}`);
      }

      // 重置时间开始循环
      if (elapsed >= duration) {
        startTime = null;
      }

      animationFrameId = requestAnimationFrame(animate);
    };

    // 初始显示横线
    if (lineRef.current) {
      lineRef.current.setAttribute('x1', '50');
      lineRef.current.setAttribute('x2', '250');
    }

    // 启动动画
    animationFrameId = requestAnimationFrame(animate);

    // 清理动画
    return () => {
      cancelAnimationFrame(animationFrameId);
    };

    animationFrameId = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(animationFrameId);
  }, []);

  return (
    <div style={{
      background: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      height: '100vh',
      textAlign: 'center'
    }}>
      <svg ref={svgRef} width="300" height="250" viewBox="0 0 300 250">
        {/* 阴影滤镜定义 */}
        <defs>
          <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
            <feDropShadow dx="2" dy="2" stdDeviation="2" floodColor="rgba(0,0,0,0.5)" />
          </filter>
        </defs>

        {/* 403数字 - 蓝色带阴影 */}
        <text
          ref={digit1Ref}
          x="20"
          y="150"
          fontFamily="Arial"
          fontSize="120"
          fill="#3a7bd5"
          filter="url(#shadow)"
        >4</text>
        <text
          ref={digit2Ref}
          x="110"
          y="150"
          fontFamily="Arial"
          fontSize="120"
          fill="#3a7bd5"
          filter="url(#shadow)"
        >0</text>
        <text
          ref={digit3Ref}
          x="200"
          y="150"
          fontFamily="Arial"
          fontSize="120"
          fill="#3a7bd5"
          filter="url(#shadow)"
        >3</text>

        {/* 横线 - 北京渐变 */}
        <defs>
          <linearGradient id="beijingGradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="#3a7bd5" />
            <stop offset="100%" stop-color="#00d2ff" />
          </linearGradient>
        </defs>
        <line
          ref={lineRef}
          x1="50"
          y1="180"
          x2="250"
          y2="180"
          stroke="url(#beijingGradient)"
          strokeWidth="4"
        />
        <defs>
          <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#006699" />
            <stop offset="100%" stopColor="#95e5f9" />
          </linearGradient>
        </defs>
        <line
          ref={lineRef}
          x1="150"
          y1="180"
          x2="150"
          y2="180"
          stroke="url(#lineGradient)"
          strokeWidth="2"
          strokeDasharray="300"
        />

        {/* FORBIDDEN文字 */}
        <text
          x="150"
          y="220"
          textAnchor="middle"
          fontFamily="Arial"
          fontSize="24"
          fill="#95e5f9"
        >
          FORBIDDEN
        </text>
      </svg>
        {/* 错误信息展示区域 */}
        <div style={{ margin: '20px 0', color: '#999', maxWidth: '80%' }}>

            <p> 接口路径: {path} </p>
        </div>
      <button
        onClick={() => navigate('/')}
        style={{
          marginTop: '20px',
          padding: '10px 20px',
          backgroundColor: '#006699',
          color: 'white',
          border: 'none',
          borderRadius: '5px',
          cursor: 'pointer'
        }}
      >
        返回首页
      </button>
    </div>
  );
};

export default Error403;
